<template>
	<view>
		<view class="content">
			<view class="formBox">
        <view class="tab-wrapper f-c-sb">
          <view :class="tabindex == 1 ? 'active' : ''" @click="selectTabindex(1)">下属门店</view>
          <view :class="tabindex == 2 ? 'active' : ''" @click="selectTabindex(2)">直营门店</view>
        </view>
        <u-tabs-swiper ref="uTabs" :list="list" :current="current" @change="tabsChange" :is-scroll="false"
                       swiperWidth="750" bg-color="transparent"></u-tabs-swiper>
        <view class="search-wrapper">
          <u-search v-model="listQuery.storeName" height="70" placeholder="请输入门店名称" @custom="search"
                    @search="search"></u-search>
        </view>
        <view class="list" style="height: 100%;">
          <u-empty v-if="!storeList.length" mode="list"></u-empty>
          <view class="item boxShadow" v-for="(item, index) in storeList" :key="item.storeId">
            <view class="f-c-fs">
              <view class="color "
                    :class="item.storeTypeStr=='直营门店'?'color1':item.storeTypeStr=='加盟门店'?'color3':item.storeTypeStr=='合作门店'?'color4':''">
                {{ item.storeTypeStr }}
              </view>
              <view class="color color2" v-if="item.storeId == userInfo.storeBasicId">当前门店</view>
            </view>
            <view class="item-title f-c-sb">
              <view>{{ item.storeName }}</view>
              <u-checkbox size="50" @change="checkboxChange(index, item.checkbox, item.storeId)"
                          v-model="item.checkbox"></u-checkbox>
						</view>
						<view class="info">{{ item.address }}</view>
					</view>
					<u-loadmore v-if="!listQuery.noData && storeList.length != 0" :status="'nomore'" :load-text="{ nomore: '没有更多数据了' }" style="" />
				</view>
			</view>
		</view>
		<u-popup mode="bottom" v-model="show" :closeable="true" border-radius="26">
			<scroll-view scroll-y="true" style="height: 900rpx;padding: 40rpx 0;box-sizing: border-box;" class="">
				<view class="list">
					<u-empty v-if="!selectList.length" mode="list" style="margin-top: 200rpx;"></u-empty>
					<view class="item boxShadow" v-for="(item, index) in selectList" :key="item.storeId">
						<view class="f-c-fs">
							<view class="color " :class="item.storeTypeStr=='直营门店'?'color1':item.storeTypeStr=='加盟门店'?'color3':item.storeTypeStr=='合作门店'?'color4':''">{{ item.storeTypeStr }}</view>
							<view class="color color2" v-if="item.storeId == userInfo.storeBasicId">当前门店</view>
						</view>
						<view class="item-title f-c-sb">
							<view>{{ item.storeName }}</view>
							<u-checkbox size="50" @change="checkboxChange1(index, item.checkbox, item.storeId)" v-model="item.checkbox"></u-checkbox>
						</view>
						<view class="info">{{ item.address }}</view>
					</view>
				</view>
			</scroll-view>
		</u-popup>
		<view class="btn-wrapper f-c-sa">
			<view class="text" @click="show = true">
				已选：{{ selectList.length }}家门店
				<u-icon name="arrow-up" color="#333" size="32"></u-icon>
			</view>
			<view class="btn" @click="goBack">确认</view>
		</view>
	</view>
</template>

<script>
import {findStore, showStoreList} from '@/api/index.js';
import {mapGetters} from 'vuex';

export default {
  data() {
    return {
      show: false,
      tabindex: 1,
      list: [
        {
          name: '洗车店',
          value: '洗车店',
					type: 'status'
				},
				{
					name: '钣喷店',
					value: '钣喷店',
					type: 'status'
				},
				{
					name: '养护店',
					value: '养护店',
					type: 'delFlag'
				}
			],
			current: 0,
			listQuery: {
				pageNo: 1,
				pageSize: 20,
				noData: true,
				selectStoreType: 1,
				shopType: 1,
				storeName: ''
			},
			storeList: [],
			selectList: []
		};
	},
	computed: {
		...mapGetters(['userInfo', 'selectStore', 'selectStoreStr'])
	},
	onLoad() {
		this.init();
		if (this.selectStore.length != 0) {
			this.selectList = this.selectStore;
		} else if (this.selectStore.length == 0 && this.selectStoreStr) {
			this.getSelectList();
		}
	},
	onShow() {},
	onReachBottom() {
		if (this.listQuery.noData) {
			this.init();
		}
	},
	methods: {
		selectTabindex(index) {
			if (this.tabindex != index) {
				this.tabindex = index;
				this.listQuery.pageNo = 1;
				this.listQuery.selectStoreType = index;
				this.listQuery.noData = true;
				console.log(this.listQuery);
				this.getlist();
			}
		},
		tabsChange(index) {
			console.log(index, this.current);
			if (this.current != index) {
				this.current = index;
				this.listQuery.shopType = Number(index) + 1;
				this.listQuery.pageNo = 1;
				this.listQuery.noData = true;
				this.getlist();
			}
		},
		init() {
			this.getlist();
		},
		checkboxChange(index, status, storeId) {
			console.log(index, status, storeId);
			if (!status) {
				this.selectList.push(this.storeList[index]);
			} else {
				this.selectList.forEach((val, index) => {
					if (val.storeId == storeId) {
						this.selectList.splice(index, 1);
					}
				});
			}
		},
		checkboxChange1(index, status, storeId) {
			this.selectList.splice(index, 1);
			this.checkList();
		},
		checkList() {
			this.storeList.forEach((val, index) => {
				this.selectList.forEach((val1, index1) => {
					if (val.storeId == val1.storeId) {
						this.storeList[index].checkbox = true;
					}
				});
			});
		},
		search(value) {
			this.listQuery.noData = true;
			this.listQuery.pageNo = 1;
			this.getlist();
		},
		getSelectList() {
			showStoreList({ storeId: this.selectStoreStr }).then(res => {
				res.data.forEach((val, index) => {
					res.data[index].checkbox = true;
				});
				this.selectList = res.data;
				this.checkList();
			});
		},
		getlist() {
			this.listQuery.storeId = this.userInfo.storeBasicId;
			var data = {
				storeType: this.userInfo.storeBasicType,
				...this.listQuery
			};
			findStore(data).then(res => {
				console.log(res);
				if (this.listQuery.pageNo == 1) {
					this.storeList = res.data;
				} else {
					this.storeList = this.storeList.concat(res.data);
				}
				this.storeList.forEach((val, index) => {
					val.checkbox = false;
				});
				this.checkList();
				this.listQuery.pageNo += 1;
				if (this.listQuery.pageSize != res.data.length) {
					this.listQuery.noData = false;
				}
			});
		},
		goBack() {
			this.$store.commit('setSelectStore', this.selectList);
			uni.navigateBack({
				delta: 1
			});
		}
	}
};
</script>

<style lang="less">
.content {
	padding-top: 20rpx;
	padding-bottom: 200rpx;
	.formBox {
		padding: 0 0 20rpx 0;
		.tab-wrapper {
			width: 100%;
			view {
				width: 350rpx;
				height: 98rpx;
				background: #eaf3ff;
				font-size: 24rpx;
				font-weight: 700;
				text-align: left;
				color: #177fff;
				text-align: center;
				line-height: 98rpx;
				&.active {
					font-size: 30rpx;
					background-color: #fff;
				}
			}
		}
		.search-wrapper {
			width: 100%;
			padding: 20rpx;
			box-sizing: border-box;
		}
	}
}
.list {
	width: 100%;
	.item {
		width: 660rpx;
		height: 231rpx;
		background: #ffffff;
		border-radius: 18rpx;
		margin: 23rpx auto;
		padding: 30rpx;
		box-sizing: border-box;
		.color {
			width: 110rpx;
			height: 36rpx;
			opacity: 1;
			background: #177fff;
			border-radius: 6rpx;
			font-size: 24rpx;
			font-weight: 700;
			text-align: center;
			color: #ffffff;
			line-height: 36rpx;
			margin-right: 18rpx;
			&.color1 {
				background: #177fff;
			}
			&.color2 {
				background: #ff6738;
			}
			&.color3 {
				background: #f54170;
			}
			&.color4 {
				background: #2db2ad;
			}
		}
	}
	.item-title {
		font-size: 28rpx;
		font-weight: 700;
		color: #131313;
		margin: 20rpx 0;
	}
	.info {
		font-size: 24rpx;
		font-weight: 500;
		color: #666666;
		line-height: 36rpx;
	}
}

.btn-wrapper {
	width: 100%;
	height: 140rpx;
	background: #ffffff;
	position: fixed;
	left: 0;
	bottom: 0;
	z-index: 100;
	.text {
		font-size: 32rpx;
		font-weight: 700;
		color: #177fff;
	}
	.btn {
		width: 410rpx;
		height: 100rpx;
		background: #177fff;
		border-radius: 50rpx;
		text-align: center;
		line-height: 100rpx;
		font-size: 32rpx;
		font-weight: bold;
		text-align: center;
		color: #ffffff;
		line-height: 100rpx;
	}
}
</style>
